<template>
	<view class="privacy-container">
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序使用web-view全屏显示 -->
		<web-view v-if="!agreed" :src="privacyUrl"></web-view>
		<!-- #endif -->

		<!-- #ifndef MP-WEIXIN -->
		<!-- 其他端的实现 -->
		<view class="privacy-wrapper">
			<view class="privacy-header">
				<image src="https://admin.mosizp.cn/static/public/logo.png" class="app-logo" mode="aspectFit"></image>
				<text class="app-name">摩师直聘</text>
				<text class="welcome-text">欢迎使用摩师直聘</text>
			</view>

			<view class="privacy-body">
				<view class="privacy-title">服务协议与隐私政策</view>
				<view class="privacy-intro">在您使用本应用前，请认真阅读并同意以下条款：</view>

				<!-- H5端使用iframe -->
				<!-- #ifdef H5 -->
				<view class="iframe-container">
					<iframe :src="privacyUrl" class="privacy-iframe"></iframe>
				</view>
				<!-- #endif -->

				<!-- APP端使用web-view -->
				<!-- #ifdef APP-PLUS -->
				<view class="webview-container">
					<web-view :src="privacyUrl" class="privacy-webview"></web-view>
				</view>
				<!-- #endif -->
			</view>

			<view class="privacy-footer">
				<button class="btn-agree" @click="agreePrivacy">同意并继续</button>
				<button class="btn-cancel" @click="disagreePrivacy">暂不使用</button>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			privacyUrl: 'https://admin.mosizp.cn/service.html', // 隐私政策页面
			agreed: false,
			version: '1.0.0'
		}
	},
	onLoad(options) {
		this.version = options.version || '1.0.0';

		// #ifdef MP-WEIXIN
		// 小程序需要特殊处理，因为web-view是全屏的
		// 在隐私政策页面中加入同意按钮
		this.privacyUrl = `https://admin.mosizp.cn/service.html?miniprogram=1&version=${this.version}`;
		// #endif

		// 设置页面标题
		uni.setNavigationBarTitle({
			title: '服务协议与隐私政策'
		});

		// 隐藏返回按钮
		// #ifdef MP-WEIXIN
		uni.hideHomeButton();
		// #endif
	},
	onShow() {
		// 检查是否从隐私政策页面返回（小程序）
		// #ifdef MP-WEIXIN
		const agreed = uni.getStorageSync('privacy_temp_agreed');
		if (agreed === true) {
			uni.removeStorageSync('privacy_temp_agreed');
			this.handleAgree();
		}
		// #endif
	},
	methods: {
		// 同意隐私政策
		agreePrivacy() {
			this.handleAgree();
		},

		// 处理同意逻辑
		handleAgree() {
			// 保存同意记录
			uni.setStorageSync('privacy_policy_agreed', true);
			uni.setStorageSync('privacy_policy_version', this.version);
			uni.setStorageSync('privacy_policy_agreed_time', new Date().toISOString());

			// 跳转到首页
			uni.reLaunch({
				url: '/pages/public/index'
			});
		},

		// 不同意隐私政策
		disagreePrivacy() {
			uni.showModal({
				title: '提示',
				content: '您需要同意隐私政策才能使用本应用',
				confirmText: '重新考虑',
				cancelText: '退出应用',
				success: (res) => {
					if (res.confirm) {
						// 用户选择重新考虑
					} else if (res.cancel) {
						// 退出应用
						// #ifdef APP-PLUS
						plus.runtime.quit();
						// #endif
						// #ifdef H5
						window.close();
						// #endif
						// #ifdef MP-WEIXIN
						wx.exitMiniProgram();
						// #endif
					}
				}
			});
		}
	},
	// 小程序端监听web-view消息
	onMessage(e) {
		// #ifdef MP-WEIXIN
		if (e.detail && e.detail.data) {
			const data = e.detail.data[e.detail.data.length - 1];
			if (data.action === 'agree') {
				this.handleAgree();
			} else if (data.action === 'disagree') {
				this.disagreePrivacy();
			}
		}
		// #endif
	}
}
</script>

<style lang="scss" scoped>
.privacy-container {
	width: 100%;
	height: 100vh;
	background: #f5f5f5;
}

.privacy-wrapper {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.privacy-header {
	padding: 60rpx 0 40rpx;
	text-align: center;
	background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.app-logo {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
}

.app-name {
	display: block;
	margin-top: 20rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
}

.welcome-text {
	display: block;
	margin-top: 10rpx;
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
}

.privacy-body {
	flex: 1;
	padding: 30rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.privacy-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 20rpx;
}

.privacy-intro {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 30rpx;
	text-align: center;
}

.iframe-container {
	flex: 1;
	border: 1rpx solid #eee;
	border-radius: 16rpx;
	overflow: hidden;
}

.privacy-iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.webview-container {
	flex: 1;
	border: 1rpx solid #eee;
	border-radius: 16rpx;
	overflow: hidden;
}

.privacy-webview {
	width: 100%;
	height: 100%;
}

.privacy-footer {
	padding: 30rpx;
	background: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.btn-agree {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	font-size: 32rpx;
	border-radius: 45rpx;
	border: none;
	margin-bottom: 20rpx;
}

.btn-cancel {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background: #fff;
	color: #999;
	font-size: 30rpx;
	border-radius: 45rpx;
	border: 1rpx solid #ddd;
}
</style>